import './index.css'
import { Avatar, Radio, type RadioChangeEvent } from 'antd'
import { useRef, useState } from 'react'
import ModelCalendar from '../components/model-calendar'
import ModelTimes from '../components/model-times'
import { UserOutlined } from '@ant-design/icons'
import useUser from '@/hook/use-user'


const WorkPage = () => {
    const [model, setModel] = useState('calendar')
    const modelCalendarRef = useRef<any>(null)
    const modelTimesRef = useRef<any>(null)
    const user = useUser()
    const modelChange = (e: RadioChangeEvent) => {
        setModel(e.target.value)
    }
    return (
        <div className="work-page">
            <div className='work-page-warp'>
                <div className='work-page-header'>
                    <div className='work-page-header-left'>
                        <Avatar style={{ backgroundColor: '#1677ff' }} shape="square" size={32} icon={<UserOutlined />} />
                        <span className='work-page-header-username'>{user.username}</span>
                    </div>
                    <div className='work-page-header-right'>
                        <Radio.Group onChange={modelChange} defaultValue={model}>
                            <Radio.Button value="calendar">日历</Radio.Button>
                            <Radio.Button value="times">时间表</Radio.Button>
                        </Radio.Group>
                    </div>
                </div>
                <div className='work-page-body' >
                    {model === 'calendar' && <ModelCalendar ref={modelCalendarRef}></ModelCalendar>}
                    {model === 'times' && <ModelTimes ref={modelTimesRef}></ModelTimes>}
                </div>
            </div>
        </div>
    )
}

export default WorkPage